<template>
  <div class="profile-page">
    <el-container>
      <el-header class="header">
        <h1>个人中心</h1>
        <el-button @click="logout" type="danger">退出登录</el-button>
      </el-header>

      <el-main>
        <el-card class="profile-card">
          <template #header>
            <span>个人信息</span>
          </template>

          <el-form :model="userInfo" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="userInfo.username" disabled />
            </el-form-item>

            <el-form-item label="邮箱">
              <el-input v-model="userInfo.email" disabled />
            </el-form-item>

            <el-form-item label="注册时间">
              <el-input v-model="formattedCreateTime" disabled />
            </el-form-item>
          </el-form>
        </el-card>

        <el-card class="stats-card">
          <template #header>
            <span>使用统计</span>
          </template>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-statistic title="生成脚本次数" :value="stats.scriptCount" />
            </el-col>
            <el-col :span="8">
              <el-statistic title="选择软件数量" :value="stats.softwareCount" />
            </el-col>
            <el-col :span="8">
              <el-statistic title="登录次数" :value="stats.loginCount" />
            </el-col>
          </el-row>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { formatDate } from '@/utils'
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userStore = useUserStore()

const userInfo = ref({
  username: '',
  email: '',
  createTime: null
})

const stats = ref({
  scriptCount: 0,
  softwareCount: 0,
  loginCount: 0
})

const formattedCreateTime = computed(() =>
{
  return userInfo.value.createTime ? formatDate(userInfo.value.createTime) : ''
})

const logout = async () =>
{
  await userStore.logout()
  router.push('/login')
}

onMounted(async () =>
{
  try
  {
    const user = await userStore.getUserInfo()
    userInfo.value = user

    // 模拟统计数据
    stats.value = {
      scriptCount: Math.floor(Math.random() * 50),
      softwareCount: Math.floor(Math.random() * 20),
      loginCount: Math.floor(Math.random() * 100)
    }
  } catch (error)
  {
    console.error('获取用户信息失败:', error)
  }
})
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header h1 {
  margin: 0;
  color: #333;
}

.profile-card,
.stats-card {
  margin-bottom: 20px;
}

.el-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>
